<template>
	<view class="content">
		<view class="" id="v1">
			<image src="../../static/index1.png" mode=""></image>
		</view>
		<view id="v2">
			你好，黄大仙，祝你开心每一天！
		</view>		
		<view class="ka" id="v3">
			<!-- 上 -->
			<view class="shang1">
				<view class="">
					<text class="iconfont icon-yonghuzhongxinicon09" id="kaoqin2"></text>
						<view class="">
							<text>{{clock_date}}</text>
							考勤情况
						</view>
				</view>
			</view>
			<!-- 下 -->
			<view>
				<view class="ka1">
					<view>
						上班打卡
					</view>
					<view :class="zhuang1">
						迟到
					</view>
					<view>
						{{clock_in}}
					</view>
				</view>
				<view class="ka1">
					<view>
						下班打卡
					</view>
					<view :class="zhuang2">
						早退
					</view>
					<view>
						{{clock_go}}
					</view>
				</view>
				<view class="">
					<text>温馨提示：</text>
					<text>打卡异常，请尽快处理异常情况！</text>
				</view>
			</view>
		</view>
		<view class="ka" id="v4">
			<view class="" @click="daka">
				<text class="iconfont icon-daqia"></text>
				<view class="">
					打卡
				</view>
			</view>
			<view class="" @click="kaoqin">
					<text class="iconfont icon-daka"></text>
					<view class="">
						考勤查询
					</view>
				</view>
			<view class="" @click="shenqing">
					<text class="iconfont icon-shenqing"></text>
					<view class="">
						我的申请
					</view>
				</view>
		</view>
		<view class="ka" id="v5">
			<view class="shang1">
				<view class="">
					<text class="iconfont icon-qizi"></text>
					<view class="">
						会议通知
					</view>
				</view>
				<text class="iconfont icon-xiangyou1" @click="huiyi"></text>
			</view>
			
			<view class="">
				<view v-for="(v,i) in huiyi3" :key="v.meeting_num" @click="huiyi_2(i)">
					<image src="../../static/index_1.png" mode=""></image>
					<view class="">
						<view class="">
							{{ v.meeting_tit }}
						</view>
						<text>{{ v.meeting_startime.slice(0,10)==clock_date?"今天":v.meeting_startime.slice(0,10) }}</text>
						<text>{{ v.meeting_startime.slice(12,16) + "-" + v.meeting_endtime.slice(12,16) }}</text>
						<view class="">
							{{ v.metroom_name }}
						</view>
					</view>
				</view>		
			</view>
		</view>
		
		<view class="ka" id="v6">
			<view class="shang1">
				<view class="">
					<text class="iconfont icon-laba"></text>
					<view class="">
						公告通知
					</view>
				</view>
				<text class="iconfont icon-xiangyou1" @click="gonggao"></text>
			</view>
			<view class="">
				<!-- 1 -->
				<view class="" @click="gonggao_2(i)" v-for="(v,i) in gonggao2">
					<image src="../../static/index_1.png" mode=""></image>
					<view class="">
						<view class="">
							{{ v.notice_title }}
						</view>
						<view class="">
							<view :class="v.notice_className=='公司通告'||v.notice_className=='规章制度'||v.notice_className=='下载中心'?'biaoqian1':'biaoqian2'">
								{{ v.notice_className }}
							</view>
							<text>{{ v.notice_time }}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import{
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	import stor from '../../store/index.js'
	import http from "../../utils/http.js";
	
	
	
	export default {
		setup(){
			// 钩子函数
			onMounted(() => {
				// 如果有缓存,那就将缓存里面的用户信息放进vueX中,如果没有那就需要登录;
				const value = uni.getStorageSync('user1');
				if (value) {
					stor.commit('liujinchang/setTododata',value);
					//获取本人的考勤信息，根据用户信息里面的id来获取他本人的考勤信息
					let work_id = stor.state.liujinchang.user.work_id
					http({
						url:'/home/get_kaoqin',
						method:'get',
						data:{
							word_id:work_id
						}
					}).then((res)=>{
						data.clock = res.data.data[0];
						data.clock_in=data.clock.clock_in.slice(11,16);
						data.clock_go=data.clock.clock_go.slice(11,16);
						data.clock_date = data.clock.clock_in.slice(0,10);
					})
					
					// 判断是否早退，根据用户信息中的地址和部门来查询部门的考勤时间,然后经过出来时间来判断是否早退、迟到等情况
					let dizhi = stor.state.liujinchang.user.address
					let bumen = stor.state.liujinchang.user.department_name
					let jiequ1 = dizhi.indexOf("市");
					let jiequ2 = dizhi.slice(jiequ1-2,jiequ1)
						// 现在部门就是"bumen”",地址就是"jiequ2”"
					http({
						url:'/home/bumen_time',
						method:'get',
						data:{
							bumen:bumen,
							jiequ2:jiequ2
						}
					}).then((res)=>{
						data.work_time = res.data.data[0];
						let s1 = data.work_time.forenoon.slice(0,2);	//规定的早时
						let s2 = data.work_time.forenoon.slice(2,5);	//规定的的早分
						let s3 = data.work_time.afternoon.slice(6,8);	//规定的晚时
						let s5 = new Date(data.clock.clock_in).getHours()	//本人的早时
						let s6 = new Date(data.clock.clock_in).getMinutes()	//本人的早分
						let s7 = new Date(data.clock.clock_go).getHours()	//本人的晚分
						// 判断早上是否迟到了
						if(s5<=s1){
							if(s2>=s6+5){
								data.zhuang1 = "zhuang3";
							}else{
								data.zhuang1 = "zhuang1";
							}
						}else{
							data.zhuang1 = "zhuang1";
						}
						// 判断晚上是否早退了
						if(s7>=s3){
							data.zhuang2 = "zhuang3";
						}else{
							data.zhuang2 = "zhuang2";
						}
					})
					
					// 获取会议数据，将会议通知的信息存进vux里面,并且渲染
					http({
						url:'/home/memories1',
						method:'get',
					}).then((res)=>{
						stor.commit('liujinchang/setTododata2',res.data.data);
						let tian = new Date(data.clock_date)	//年月日
						res.data.data.forEach((key,index)=>{
							let tian2 = new Date(key.meeting_startime)		//日期
							// console.log(tian2);
							if(tian2>=tian){
								data.huiyi2.push(key);
							}
						})
						if(data.huiyi2.length>2){
							for(let i=0;i<2;i++){
								data.huiyi3.push(data.huiyi2[i]);
							}							
						}else{
							data.huiyi3=data.huiyi2;
						}
					})
					
					//获取公告通知数据
					http({
						url:'/home/notice_home',
						method:'get',
					}).then((res)=>{
						// console.log(res.data.data);
						stor.commit('liujinchang/notice_home_fct',res.data.data);
						let tian = new Date(data.clock_date)	//年月日
						res.data.data.forEach((key,index)=>{
							let tian2 = new Date(key.notice_time)		//日期
							if(tian2>=tian){
								data.gonggao1.push(key);
							}
						})
						if(data.gonggao1.length>3){
							for(let i=0;i<3;i++){
								data.gonggao2.push(data.gonggao1[i])
							}								
						}else{
							data.gonggao2 = data.gonggao1;
						}
					})
					
				}else{
					console.log("没有缓存");
					uni.navigateTo({
						url:"../login/login"
					})
				}
			})
			
			let data = reactive({
				// 变量
				clock:[],		//本人的考勤信息
				work_time:[],	//部门的上下班时间
				huiyi2:[],		//将要进行的所有会议通知
				huiyi3:[],		//首页渲染的会议通知
				gonggao1:[],	//所有符合条件的公告通知
				gonggao2:[],	//首页渲染的公告通知
				
				clock_in:'',	//渲染的上下班时间
				clock_go:'',
				clock_date:"",
				
				zhuang1:"zhuang3",	//是否是迟到、早退和正常的状态
				zhuang2:"zhuang3",

				// 方法
				daka:()=>{
					uni.navigateTo({
						url:"../clock_in/clock_in"
					})
				},
				kaoqin:()=>{
					uni.navigateTo({
						url:"../attendance/attendance"
					})
				},
				shenqing:()=>{
					uni.navigateTo({
						url:"../application/application"
					})
				},
				huiyi:()=>{
					uni.navigateTo({
						url:"../meeting/meeting"
					})
				},
				gonggao:()=>{
					uni.navigateTo({
						url:"../announcement_notice/announcement_notice"
					})
				},
				huiyi_2:(e)=>{
					stor.commit('liujinchang/huiyi_notice_fct',data.huiyi3[e]);
					uni.navigateTo({
						url:"../meeting_details/meeting_details"
					})
				},
				gonggao_2:(e)=>{
					stor.commit('liujinchang/notice_gong_fct',data.gonggao2[e]);
					uni.navigateTo({
						url:"../announcement_details/announcement_details"
					})
				},
				
				
				
			})
			return {
				...toRefs(data)
			}
			
		},
		
	}
</script>

<style lang="scss">
	
	@import '~@/static/font/iconfont.css';
	
page{
	background: #f7f7f7;
}

	
.content{
	#v1{
		position: absolute;
		top: 0;
		z-index: -1;
		image{
			width: 750rpx;
			height: 282rpx;
			// 哈哈
		}
	}
	.ka{
		background: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: 0 36rpx;
		padding: 36rpx 36rpx;
		margin-bottom: 24rpx;
		padding-top: 0;
	}
	#v2{
		margin-top: 36rpx;
		color: #fff;
		box-sizing: border-box;
		padding: 0 36rpx;
		font-size: 30rpx;
		margin-bottom: 24rpx;
	}
	.shang1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		
	}
	.shang1>view:nth-child(1){
		display: flex;
		color: #2D8CF0;
		align-items: center;
		height: 80rpx;
		text{
			color: #2D8CF0;
			font-size: 30rpx;
			margin-right: 24rpx;
		}
	}
	#v3>view:last-child{
		display: flex;
		margin-top: 24rpx;
		justify-content: space-between;
	}
	#v3>view:last-child>view{
		width: 30%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	#v3>view:last-child>view:nth-child(1){
		
	}
	#v3>view:last-child:last-child>view:last-child{
		font-size: 28rpx;
		word-wrap: normal;
		color: #666;
		display: flex;
		justify-content: flex-start;
	}
	
	// 迟到或者早退的状态
	.zhuang1{
		font-size: 22rpx;
		border: 1px solid #ff6600;
		width: 68rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
		color: #ff6600;
	}
	.zhuang2{
		font-size: 22rpx;
		border: 1px solid #ee3f4d;
		width: 68rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
		color: #ee3f4d;
	}
	.zhuang3{
		font-size: 22rpx;
		border: 1px solid #66c18c;
		width: 68rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
		color: #66c18c;
	}
	
	
	
	.ka1{
		view:nth-child(1){
			font-size: 26rpx;
			color: #666;
		}
		view:nth-child(3){
			font-size: 54rpx;
			font-weight: 600;
			margin-top: 24rpx;
		}
	}
	
	#v4{
		display: flex;
		justify-content: space-around;
		padding-top: 24rpx;
		.iconfont{
			color: #2D8CF0;
		}
	}
	#v4>view{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		
		text{
			font-size: 60rpx;
			margin-bottom: 12rpx;
		}
		view{
			color: #666;
			font-size: 32rpx;
		}
	}
	
	#v5>view:last-child>view{
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		border-bottom: 1px solid #ccc;
		padding-bottom: 24rpx;
		image{
			width: 88rpx;
			height: 64rpx;
			margin-right: 24rpx;
		}
	}
	#v5>view:last-child>view:last-child{
		border: none;
		padding-bottom: 0;
	}
	#v5>view:last-child>view>view{
		view:nth-child(1){
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			line-height: 45rpx;
		}
		text{
			font-size: 28rpx;
			color: #999;
			line-height: 42rpx;
			margin-right: 12rpx;
		}
		view:nth-child(4){
			color: #999;
			font-size: 30rpx;
			line-height: 45rpx;
		}
	}
	
	#v6>view:last-child>view{
		display: flex;
		margin-top: 24rpx;
		align-items: center;
		border-bottom: 1px solid #ccc;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		
		image{
			width: 88rpx;
			height: 64rpx;
			margin-right: 24rpx;
		}
	}
	#v6>view:last-child>view:last-child{
		border: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	
	#v6>view:last-child>view>view>view:nth-child(1){
		color: #333;
		font-size: 30rpx;
		font-weight: 600;
	}
	#v6>view:last-child>view>view>view:nth-child(2){
		display: flex;
		justify-content: space-between;
		align-items: center;
		text{
			color: #999;
			font-size: 24rpx;
		}
	}
	
	.biaoqian1{
		font-size: 22rpx;
		color: #fff;
		background: #7293ff;
		width: 110rpx;
		height: 46rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}
	.biaoqian2{
		font-size: 22rpx;
		color: #fff;
		background: #66c18c;
		width: 110rpx;
		height: 46rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	#kaoqin2{
		color: #007AFF;
	}
	
	
}

</style>
